
<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="searchParam.service_name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="order_type_name" label="工单类型" />
      <el-table-column prop="service_name" label="服务名" />
      <el-table-column prop="business_name" label="业务线" />
      <el-table-column prop="created" label="创建时间" />
      <el-table-column prop="creator" label="申请者" />
      <el-table-column prop="status" label="状态" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <router-link :to="{ name: 'WorkorderDetail', query: { id: scope.row.id }}">详情</router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tablePageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/flow/workorder/'

export default {
  data() {
    return {
      tableData: [],
      tablePageSize: 10,
      tablePage: 1,
      tableTotal: 0,
      listLoading: true,
      searchParam: {
        path: '',
        name: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const params = Object.assign(this.searchParam, { 'page': this.tablePage, 'page_size': this.tablePageSize })
      getList(params).then(response => {
        this.tableData = response.data
        this.tableTotal = response.total
        this.listLoading = false
      })
    },
    handleCurrentChange(page) {
      this.tablePage = page
      console.log(page, this.tablePageSize)
      this.fetchData()
    },
    handleSizeChange(pagesize) {
      this.tablePageSize = pagesize
      this.fetchData()
    }
  }
}
</script>

<style>

</style>
